<template>
  <div :style="{'text-align': 'center','font-size':font_size,width:'1000px'}">
    <el-card shadow="never">
      <div style="font-size:2rem;font-weight:600;">机器人使用说明{{ title }} {{ item_name && ` · ${item_name}` }}</div>
      <el-row>
        <el-card style="width: 100%;margin: 0.2rem;">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col class="primary-icon" :span="4">
                  <div>命令</div>
                  <div class="ver-line"></div>
                </el-col>
                <el-col :span="20">
                  <div class="primary-title">
                    <div>
                      <span style="color:#999">查看目录：</span>
                      <span>帮助 [页码]</span>
                    </div>
                    <div>
                      <span style="color:#999">查看详情：</span>
                      <span style="color:#999">帮助 [指令名/目录名] [页码]</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col class="primary-icon" :span="4">
                  <div style="color: #999999;">说明</div>
                  <div class="ver-line"></div>
                </el-col>
                <el-col :span="20">
                  <div class="primary-content">
                    <div>1. 欢迎使用机器人，
                      <span style="color:#0490e1">完全免费，别花冤枉钱！</span>
                    </div>
                    <div>2. 指令按使用热度排序。</div>
                    <div style="color:#0490e1">3. []包起来表示可填可不填，例如 马场 [不填则当前绑定区服]。</div>
                    <div>4. 可以使用[设置映射 想取的指令名 原指令名]来取个小名。</div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <el-card class="item-container">

        <el-row :gutter="10">
          <el-col :span="6">
            <div style="height:18rem">
              <el-card style="text-align:left">
                <div style="font-size:1.2rem">{{ group_config.name }}</div>
                <span v-for="(x,index) in group_config.labels" :key="index">
                  <component :is="x.element||'div'" :style="x.style">{{ x.content }}</component>
                </span>
              </el-card>
            </div>
            <div style="text-align: center;font-size:1.5rem">长按扫码加群领养</div>
            <div class="img-qr-container">
              <img src="../views/common/group_qr.png" style="width:15rem" />
            </div>
          </el-col>
          <el-col :span="18">
            <div class="command-card-container">
              <div v-for="(x,index) in filter_commands.slice(0,12)" :key="index" class="command-single-card">
                <div class="command-card-title">
                  <span>{{ x.name }}</span>
                </div>
                <div class="command-card-value">
                  <div class="command-card-desc-rule">{{ get_example_desc(x).rule }}</div>
                  <div v-for="exp in get_example_desc(x).examples" :key="exp" class="command-card-desc-example">
                    <div>例:{{ exp }}</div>
                  </div>
                  <div class="command-card-desc-primary">{{ x.description }}</div>
                </div>
                <div class="command-card-description">
                  <el-rate :model-value="convertPop(x.favorite)" show-score disabled />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="item-container">
        <div>
          <span>全部指令</span>
          <span style="color:#999;margin-left:1rem;font-size:0.8rem">{{ command_description }}</span>
        </div>
        <el-row>
          <div class="command-mini-card-container">
            <div v-for="(x,index) in filter_commands_paged" :key="index" class="command-mini-single-card">
              <div class="command-mini-card-title">{{ x.name }}</div>
              <div v-for="(alias,index) in x.labels">{{ alias }}</div>
            </div>
          </div>
        </el-row>
        <el-row>

          <div style="width: 100%;display: flex;justify-content: center;margin: 1.2rem;">
            <el-pagination v-model:page-size="page.pageSize" :default-current-page="page.pageIndex + 1" small
              :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalCount" :hide-on-single-page="false" :page-sizes="[54,108,216]"></el-pagination>
          </div>
        </el-row>
      </el-card>
    </el-card>
  </div>
</template>
<style lang="scss">
  .ver-line {
    height: 3rem;
    border: 1px solid #aaaaaa;
  }

  .primary-icon {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.4rem;
    display: flex;
    justify-content: space-evenly;
  }

  .primary-title {
    color: #ff0000;
    font-weight: 400;
    text-align: left;
    line-height: 1.4rem;
    font-size: 1.12rem;
  }

  .primary-content {
    color: #999;
    text-align: left;
    line-height: 1rem;
    font-size: 0.8rem;
  }

  .sub-title {
    margin-right: 0.5rem;
    font-weight: 600;
    font-size: 1.2rem;
  }

  .global-title {
    font-weight: 600;
    font-size: 1.2rem;
  }
</style>

<style lang="scss">
  .command-card-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
  }

  .command-single-card {
    overflow: hidden;
    white-space: nowrap;
    margin: 0.2rem;
    background: #4ce6ff;
    font-size: 1.2rem;
    width: 13.5rem;
    border-radius: 0.5rem;
    color: #ffffff;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1);
  }

  .command-card-desc-example {
    white-space: wrap;
    font-size: 0.8rem;
    text-align: left;
  }

  .command-card-desc-primary {
    white-space: wrap;
    font-size: 0.8rem;
  }

  .command-card-desc-rule {
    white-space: wrap;
    font-size: 1rem;
  }

  .command-mini-card-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: masonry;

    flex-wrap: wrap;
    text-align: center;
  }

  .command-mini-single-card {
    overflow: hidden;
    white-space: nowrap;
    margin: 0.2rem;
    font-size: 0.8rem;
    max-width: 10rem;
    min-width: 5rem;
    border-radius: 0.05rem;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1);
  }

  .command-mini-card-title {
    background: #cccccc;
  }

  .command-card-title {
    background: #0490e1;
    font-size: 1rem;
  }

  .command-card-value {
    padding: 0.2rem 0.5rem;
    color: #1f0000;
    font-size: 0.9rem;
    height: 6rem;
  }

  .command-card-description {
    font-size: 0.8rem;
    height: 1.5rem;
    background: #0490e1;
  }

  .el-rate__text {
    color: #ffffff;
  }

  .el-rate {
    height: auto;
  }
</style>
<script>
  const { defineComponent, reactive, toRefs, ref, onMounted, computed } = Vue
  const component = defineComponent({
    components: {},
    setup () {
      const locale = computed(() => window.zhCn)
      onMounted(() => {
      })
      const methods = {
        parseTime,
        formatTime,
        convertSci,
        convertPop
      }
      const computes = {}
      const font_size = ref('1rem')
      computes.command_description = computed(() => {
        const commands = params_data.commands
        const total = `共${commands.length}个`

        const enables = computes.filter_commands.value.length
        const enable = `${enables}有效的`
        const valids = commands.filter(x => x.description)
        const valid = `${valids.length}个有使用说明`
        return `${total},${enable},${valid}`
      })
      computes.unnest_catalogs = computed(() => {
        const catalogs = params_data.catalogs
        const result = {}
        const extract = (x, path = '') => {
          const c_path = `${path}.${x.name}`
          x.path = c_path
          result[c_path] = x
          x.children && x.children.map(child => {
            child.parent = x
            extract(child, c_path)
          })
        }
        extract(catalogs)
        return result
      })
      computes.filter_commands = computed(() => {
        const { group_status, global_status } = params_data
        const catalogs = computes.unnest_catalogs.value
        let commands = params_data.commands

        commands.map(x => {
          x.labels = x.aliases.filter(a => a !== x.name).slice(0, 3)
          x.status_grp = group_status[x.name]
          x.status_glo = global_status[x.name]
          x.favorite = x.status_glo && x.status_glo.favorite
          x.favorite = x.favorite || 0
        })
        // 排除 v1 v2 等的
        // commands = commands.filter(x => x.name && x.name.indexOf('v') === -1)
        // 排除 纯英文的
        commands = commands.filter(x => /.*[\u4e00-\u9fa5]+.*$/.exec(x.name))

        // 尽可能每行等宽
        commands = commands.sort((a, b) => b.labels.length - a.labels.length)
        commands = commands.sort((a, b) => a.priority - b.priority)
        // 按热度排序
        commands = commands.sort((a, b) => b.favorite - a.favorite)

        return commands
      })
      computes.filter_commands_paged = computed(() => {
        const commands = computes.filter_commands.value
        const pages = computes.page.value
        const start = pages.pageIndex * pages.pageSize
        return commands.slice(start, start + pages.pageSize)
      })
      methods.get_alias_desc = x => {
        let { aliases } = x
        if (!aliases) return ''
        aliases = aliases.slice(0, 3)
        return aliases.join('|')
      }
      methods.choice = (items, count) => {
        const index = Math.floor(items.length * Math.random())
        return items[index]
      }
      methods.get_example_desc = x => {
        const { example } = x
        if (!example || !example.length) return ''
        const args = example
          .map(x => {
            const arg_type = x.arg_type
            const tpl = params_data.args_template[arg_type]
            return Object.assign({ tpl }, x)
          })

        const get_random_exp = item => {
          const raw = args.map(x => {
            const { tpl, is_optional } = x
            const exp_name = methods.choice(tpl.example)
            if (is_optional) return Math.random() > 0.5 ? exp_name : ''
            return exp_name
          }).join(' ')
          const name = x.aliases && x.aliases.length ? methods.choice(x.aliases) : x.name
          return `${name} ${raw}`
        }
        let examples = new Array(5)
          .fill(0)
          .map(x => get_random_exp())
        examples = distinct(examples, x => x).slice(0, 1)
        const rule = args.map(x => {
          const { tpl, is_optional } = x
          const show_name = x.alias || tpl.description // 优先使用参数别名
          return is_optional ? `[${show_name}]` : show_name
        }).join(' ')
        return { rule, examples }
      }

      computes.page = computed(() => {
        const { commands, pageIndex } = params_data
        return {
          pageIndex,
          pageSize: 108,
          totalCount: computes.filter_commands.value.length
        }
      })
      return {
        args_template: {},
        catalogs: {},
        commands: [],
        group_config: {},
        pageIndex: 1,
        item_name: '',
        title: '',

        ...computes,
        font_size,
        ...methods,
      }
    },
  })





</script>